<template>
	<m-layout title="支付密码" gap="24">
		<m-block radius="20">
			<view class="top">
				<view class="text">设置支付密码</view>
				<view class="text1">请输入新密码并验证手机号</view>
			</view>
			<view class="from">
				<m-block gap="0 24 0 35" spa="0 0 30" radius="100">
					<m-fromItem border="0" icon="icon-youxiang" iconColor="#999999" placeholder="请输入手机号" v-model="loginAccount" />
				</m-block>
				
				<m-block gap="0 24 0 35" spa="0 0 30" radius="100" class="code">
					<m-fromItem border="0" icon="icon-yanzhengma" iconColor="#999999" placeholder="请输入验证码"
						v-model="verificationCode">
						<m-sendCode slot="right" :value="loginAccount"></m-sendCode>
					</m-fromItem>
				</m-block>
				<m-block gap="0 24 0 35" spa="0 0 30" radius="100">
					<m-fromItem type="password" border="0" icon="icon-mima2" iconColor="#999999" placeholder="请输入密码"
						v-model="loginPassword" />
				</m-block>
				<m-block gap="0 24 0 35" spa="0 0 30" radius="100">
					<m-fromItem  type="password" border="0" icon="icon-mima2" iconColor="#999999" placeholder="请再次输入密码"
						v-model="password2" />
				</m-block>
				<view style="margin-top: 60rpx;margin-bottom: 53rpx;">
					<m-button @click="submit">确定</m-button>
				</view>
			</view>
		</m-block>
	</m-layout>
</template>

<script>
	import { email, mobile } from '@/libs/fn/verify.js' // 引入验证工具库
	// import { SendCode } from "@/api/ctrls.js" // 引入公用接口库
	// import { Retrieved } from "@/api/userApi.js" // 引入找回密码接口
	export default {
		data() {
			return {
				loginAccount: '',
				loginPassword: '',
				password2: '',
				verificationCode: '',
				timeObj: '',
				timer: 0,
				codeLoading: false,
			};
		},
		watch: {
			timer(val) {
				if (val <= 0) {
					this.timer = 0;
					clearInterval(this.timeObj)
				}
			}
		},
		methods: {
			///////////////////////////////////// 点击事件 ////////////////////////////////////////

			///////////////////////////////////// 组件监听 ////////////////////////////////////////
			// 再次输入密码监听
			secondary() {
				if (this.loginPassword != this.password2) {
					this.Toast('两次密码输入不一致')
					this.password2 = "";
				}

			},
			///////////////////////////////////// 网络请求 ////////////////////////////////////////
			// 发送验证码
			async sendCode() {
				if (this.timer > 0) return // 如果倒计时为结束，不执行发送验证码

				if (!mobile(this.loginAccount) ) { // 是否手机
					return this.Toast('请输入正确的手机号或者邮箱');
				}

				this.codeLoading = true;
				let res = await SendCode({
					loginAccount: this.loginAccount,
					verificationAccount: this.loginAccount,
					verificationCodeType: 2
				});

				this.codeLoading = false;
				if (res.excuteResult === 0) {
					this.timer = 60;
					this.timeObj = setInterval(() => {
						this.timer--
					}, 1000)
				}
			},
			// 提交
			async submit() {
				if (!email(this.loginAccount) && !mobile(this.loginAccount)) {
					this.Toast('请输入正确的手机号或者邮箱')
					return
				}
				if (!this.verificationCode) {
					this.Toast('请输入验证码')
					return
				}
				if (!this.loginPassword) {
					this.Toast('请输入密码')
					return
				}

				if (this.loginPassword != this.password2) {
					this.Toast('两次密码输入不一致')
					return
				}

				const success = await Retrieved({
					loginAccount: this.loginAccount,
					loginPassword: this.loginPassword,
					verificationCode: this.verificationCode,
				})
			},
		}
	}
</script>

<style lang="scss">
	input {
		font-size: 28rpx;
	}

	.top {
		background: url('@/static/images/pages/login/retrieved_img.png') no-repeat;
		background-size: 100% 100%;
		padding: 28rpx 36rpx;
		color: #FFFFFF;

		.text {
			font-size: 50rpx;
			font-weight: bold;
		}

		.text1 {
			font-size: 28rpx;
			font-weight: 400;
		}
	}

	.from {
		border-radius: 60rpx 60rpx 0 0;
		background-color: #FFFFFF;
		padding: 35rpx 24rpx;
		overflow: hidden;
		
		.block {
			background: #F6F6F6;
		}
		
		.from-item {
			margin: 0;
		}
		
		.code {
			.from-item {
				padding: 15rpx 0;
			}
		}
	}
</style>
